<template>
	<view>
		<swipet-index :setp="setp"></swipet-index>
		<view class="guide">	
			<view class="center dosdiv">
				<view v-for="(item,index) in 4" :key="index" 
				class="dos" @click="dosClick(index)" 
				:style="setp==index?'background: #F6CB23;':''"></view>
			</view>
			<!-- <view ref="telegram" class="test">登录</view> -->
			<view class="guide_bottom">
				<view class="skip center" @click="skip">Skip</view>
				<view class="next center" @click="next">NEXT</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {request} from '@/api/api.js'
	import SwipetIndex from './components/index.vue'
	export default {
		name:"guide",
		components:{SwipetIndex},
		data() {
			return {
				setp:0,
				user:{}
			};
		},
		mounted() {
			// 这里是根据步骤3的代码动态创建的，有需要可自行修改
			const script = document.createElement('script');
			script.async = true;
			script.src = 'https://telegram.org/js/telegram-widget.js?22';
			script.setAttribute('data-size', 'large');
			// script.setAttribute('data-userpic', this.userpic);
			script.setAttribute('data-telegram-login', 'JumpAndSay_bot');
			script.setAttribute('data-request-access', 'write');
			script.setAttribute('data-radius', '10');
			window.onTelegramAuth = this.onTelegramAuth;
			script.setAttribute('data-onauth', 'window.onTelegramAuth(user)');
			script.setAttribute('data-auth-url', "https://xcx.zhimulp.online/#/");
			// this.$refs.telegram.appendChild(script);
			console.log('授权登录',)
		},
		methods:{
			onTelegramAuth(user) {
				this.user = user
				uni.showModal({
					title:'获取用户信息',
					content:user,
					success: (res) => {
						console.log('user',user)
					}
				})
			},
			dosClick(index){
				this.setp = index
			},
			next(){
				if(this.setp <=3) this.setp ++ 
				if(this.setp == 4){
					
					// if(!uni.getStorageSync('token')) return this.loginTelegram()
					uni.reLaunch({
						url:'/pages/own/own'
					})
				}
			},
			loginTelegram() {
				// window.location.href = 'https://oauth.telegram.org/auth?bot_id=7478309203&origin=https%3A%2F%2Fwww.telegramloveai.com&embed=1&request_access=write&return_to=https%3A%2F%2Fwww.telegramloveai.com%2Fen%2Flogin'
					window.Telegram.Login.auth(
					{
						bot_id: '7478309203',
						request_access: 'write',
						embed: 1 ,
						origin:'https://xcx.zhimulp.online/#/',
						return_to:"https://xcx.zhimulp.online/#/",
					}, (data) => {
						console.log(data, '这是回调数据');//这里的data和之前返回的user数据和格式无差异
						if (!data) {
							//失败时你需要做的逻辑
							uni.showToast({
								icon:'error',
								title:'login failure'
							})
						}
						
							//电报登录成功你需要做的逻辑（这里我是直接写了一个函数去调用登录成功后的业务逻辑）
						this.yourCallbackFunction(data)
					})
				},
			
				yourCallbackFunction(user) {
					console.log(user);
					this.user = user
					
					let params = {
					    "authDate": user.authDate,
					    "firstName": user.firstName,
					    "hash": user.hash,
					    "id": user.id,
					    "lastName": user.lastName,
					    "photoUrl": user.photoUrl
					}
					
					request({url:'/userinfo/login',method: 'POST',data:params}).then(res => {
						if(res.code == 200){
							uni.setStorageSync('token',res.data.thirdsession)
							window.location.href = "https://t.me/JumpAndSay_bot/Jump"
							uni.reLaunch({
								url:'/pages/own/own'
							})
						} else {
							uni.showToast({
								icon:'error',
								title:'login failure'
							})
						}
					})
				//正常回调拿到的user信息
				//{
				//	auth_date: 1646705584, first_name: "zzx",…}
				//	auth_date: 1646705584
				//	first_name: "zzx"
				//	hash: "9118f5e1c53d7cf3308c696565d26efc96f90d0fb59255b82bc39fd4636ddc50"
				//	id: 5021490450
				//	last_name: "fys"
				//	photo_url: "https://t.me/i/userpic/320/jvyC1v4qH7KrQqUBr5T0dK04wNm_Vr_Acl9WMynKMiuG-ToB9_E01-WCLJn8flUB.jpg"}
				//}
				//	这里需要写你业务的逻辑需求
			},
			skip(){
				console.log('fsafaf')
				// this.loginTelegram()
				uni.reLaunch({
					url:'/pages/own/own'
				})
			}
		}
		
	}
</script>

<style lang="scss">
	@import url("./guide.scss");
.test {
    //这里可以自己调整外框样子
	height: 100rpx;
	background: #fff;
}
</style>
<style>

.tgme_widget_login.large button.tgme_widget_login_button {
	opcity:0;
	cursor: pointer;
}
</style>